// 宽度容器
@mixin box-w($w:100%, $background:null) {
  width     : $w;
  box-sizing: border-box;
  background: $background;
}

// 高度容器
@mixin box-h($h:100%, $background:null) {
  height    : $h;
  box-sizing: border-box;
  background: $background;
}

// 自定义容器
@mixin box($w:100%, $h:100%, $background:null) {
  width     : $w;
  height    : $h;
  background: $background;
  box-sizing: border-box;
}

// 行内块自定义容器
@mixin box-i($w:100%, $h:100%, $background:null) {
  width     : $w;
  height    : $h;
  box-sizing: border-box;
  background: $background;
  display   : inline-block;
}

// 块级自定义容器
@mixin box-b($w:100%, $h:100%, $background:null) {
  display   : block;
  width     : $w;
  height    : $h;
  background: $background;
  box-sizing: border-box;
}

// 块级自定义容器-背景
@mixin box-bg($w, $h, $url:'', $size:100%, $dis:block) {
  width     : $w;
  height    : $h;
  box-sizing: border-box;
  display   : $dis;
  @include bg($url, $size);
}

// 背景图片
@mixin bg($url, $size:100%, $position:center, $repeat:no-repeat) {
  background-image   : url($url);
  background-repeat  : $repeat;
  background-position: $position;
  background-size    : $size;
}

// 渐变
@mixin gradient($c1, $c2, $dire:to right) {
  background-image: linear-gradient($dire, $c1, $c2);
}

// 弹性盒子容器-row
@mixin flex-row($main:flex-start, $cross:center) {
  display        : flex;
  justify-content: $main;
  align-items    : $cross;
}

// 弹性盒子-换行
@mixin flex-wrap {
  @include flex-row();
  flex-wrap: wrap;
}

// 弹性盒子容器-居中
@mixin flex-center {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

// 弹性盒子容器-col
@mixin flex-col($main:center, $cross:center) {
  display        : flex;
  flex-direction : column;
  justify-content: $main;
  align-items    : $cross;
}

// 文字属性设置
@mixin font-set($size:inherit, $color:#333, $weight:normal, $style:normal, $family:'PingFangSC-Medium') {
  font : $style $weight $size/normal $family;
  color: $color;
}

// 保留文字换行格式(比如多空格)
@mixin font-wrap {
  white-space: pre-wrap;
}

// 文字超出隐藏-单行
@mixin font-one {
  display      : block;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
}

// 文字居中通用，flex在父容器中使用flex-center即可
@mixin font-center($height: normal) {
  text-align : center;
  line-height: $height;
}

// 文字超出隐藏-多行
@mixin font-hide($n:2) {
  display           : -webkit-box;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  text-overflow     : ellipsis;
  word-break        : break-all; // 断字点换行
  word-wrap         : break-word // 以防万一，强制换行
}

// 当前元素无法选中（pc乱点不会出现蓝色的背景块，移动不能长按选中）
@mixin sel-hide {
  -moz-user-select   : none;
  -webkit-user-select: none;
  -ms-user-select    : none;
  -khtml-user-select : none;
  user-select        : none;
}

// 细线-水平
@mixin border-w($c: #ddd, $n: .5) {
  width           : 100%;
  height          : 1px;
  background      : $c;
  color           : $c;
  transform-origin: 0 0;
  transform       : scaleX($n);
}

// 细线-垂直
@mixin border-h($c: #ddd, $n: .5) {
  width           : 1px;
  height          : 100%;
  background      : $c;
  color           : $c;
  transform-origin: 0 0;
  transform       : scaleY($n);
}

// 方块
@mixin square($w:100%, $background:null) {
  @include box($w, $w, $background);
}

// 圆形
@mixin circle($w:100%, $background:null) {
  @include square($w, $background);
  border-radius: 50%;
}

// 非弹性盒子垂直居中(父容器高度已知)
@mixin vertical {
  position : relative;
  top      : 50%;
  transform: translateY(-50%);
}

// 设置placeholder颜色
@mixin placeholder($c: #ddd) {
  input::-webkit-input-placeholder {
    color: $c;
  }

  input::-moz-input-placeholder {
    color: $c;
  }

  input::-ms-input-placeholder {
    color: $c;
  }
}

// 遮罩-定位(固定优先)
@mixin mask($opa:.6, $index:999) {
  position: fixed;
  top     : 0;
  left    : 0;
  z-index : $index;
  @include square();
  background: rgba(0, 0, 0, $opa);
}

//二维居中-定位(固定优先)
@mixin cross($position:fixed, $index:99) {
  position : $position;
  top      : 50%;
  left     : 50%;
  z-index  : $index;
  transform: translateX(-50%) translateY(-50%);
}

//上方-定位(绝对优先)
@mixin top($offset:0, $position:absolute, $index:99) {
  position: $position;
  top     : $offset;
  left    : 50%;
  z-index : $index;

  @if ($position==absolute) {
    transform: translateX(-50%);
  }

  @else if ($position==fixed) {
    transform: translateX(-50%);
  }
}

//下方-定位(绝对优先)
@mixin bottom($offset:0, $position:absolute, $index:99) {
  position: $position;
  bottom  : $offset;
  left    : 50%;
  z-index : $index;

  @if ($position==absolute) {
    transform: translateX(-50%);
  }

  @else if ($position==fixed) {
    transform: translateX(-50%);
  }
}

//左侧-定位(绝对优先)
@mixin left($offset:0, $position:absolute, $index:99) {
  position: $position;
  top     : 50%;
  left    : $offset;
  z-index : $index;

  @if ($position==absolute) {
    transform: translateY(-50%);
  }

  @else if ($position==fixed) {
    transform: translateY(-50%);
  }
}

//右侧-定位(绝对优先)
@mixin right($offset:0, $position:absolute, $index:99) {
  position : $position;
  top      : 50%;
  right    : $offset;
  z-index  : $index;
  @if ($position==absolute) {
    transform: translateY(-50%);
  }

  @else if ($position==fixed) {
    transform: translateY(-50%);
  }
}

// 左上方(绝对优先)
@mixin left-top($left:0, $top:0, $position:absolute, $index:99) {
  position: $position;
  left    : $left;
  top     : $top;
  z-index : $index;
}

// 左下方(绝对优先)
@mixin left-bottom($left:0, $bottom:0, $position:absolute, $index:99) {
  position: $position;
  left    : $left;
  bottom  : $bottom;
  z-index : $index;
}

// 右上方(绝对优先)
@mixin right-top($right:0, $top:0, $position:absolute, $index:99) {
  position: $position;
  right   : $right;
  top     : $top;
  z-index : $index;
}

// 右下方(绝对优先)
@mixin right-bottom($right:0, $bottom:0, $position:absolute, $index:99) {
  position: $position;
  right   : $right;
  bottom  : $bottom;
  z-index : $index;
}